<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<c:set var="currentMenu" value="home" />
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<title>JK Holdings</title>
<script src="/js/jquery-1.6.4.js"></script>
<script src="/js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/jquery-ui-1.8.18.custom.css" media="screen" />
<script>

var selectedCategory = "";
function clickMenuMethod(categoryId, parentCategoryId){
	
	var clickStatus = $("#"+categoryId).attr('clickstatus') * 1;
	clickStatus++;
	
	if(clickStatus == 1){
		$('table tbody tr').attr('clickstatus','0');
		$('table tbody tr').removeClass();
		$("#"+categoryId).attr('class','selected');
		$("#"+categoryId).attr('clickstatus','1');
	}else if(clickStatus == 2){
		$('table tbody tr').attr('clickstatus','0');
		$('table tbody tr').removeClass();
		$("#"+categoryId).attr('class','on');
		$("#"+categoryId).attr('clickstatus','2');
		if( $($("#"+categoryId)).parent().attr('id') == 'firstDeptTableTbody'){
			selectedCategory = categoryId;
			$.post('/category/getChilds/'+categoryId+'.do', {mode: 'mode'},
	            function(data){
					var currentIdx = 1;
					$('#secondDeptTableTbody').empty();
	        		$.each(data.model.category, function(key,value){
	        			var html = '<tr id="' + value.categoryId + '" onclick="clickMenuMethod('+value.categoryId+','+ value.parentCategoryId+')"';
	        			html += ' clickstatus="0" parentCategoryId="'+value.parentCategoryId+'"><td>' + currentIdx + '</td><td>' + value.categoryName + '</td></tr>';
	        			$('#secondDeptTableTbody').append(html);
	        			currentIdx++;
	        		});
	        }, 'json');
		}else{
			
		}
	}else{
		
	}
}
	
jQuery(function($) {
	
	$('button.del_24').click(function(){

		var buttonId = $(this).attr('id');
		var categoryIdInput = null;
		var parentCategoryIdInput = null;

		$("#categoryForm").attr('action','/category/remove.do');

		if($('tr[class=on]').size() > 0){
			categoryIdInput = $('tr[class=on]').attr('id');
			parentCategoryIdInput = $('tr[class=on]').attr('parentCategoryId');
			$('#categoryIdInput').val(categoryIdInput);
			$('#parentCategoryIdInput').val(parentCategoryIdInput);
			$("#categoryForm").submit();
		}else if($('tr[class=selected]').size() > 0){
			categoryIdInput = $('tr[class=selected]').attr('id');
			parentCategoryIdInput = $('tr[class=on]').attr('parentCategoryId');
			$('#categoryIdInput').val(categoryIdInput);
			$('#parentCategoryIdInput').val(parentCategoryIdInput);
			$("#categoryForm").submit();
		}else{
			alert('삭제 할 카테고리를 선택하여 주세요.');
		}
	});
	
	$("button.new").click(function() {
		
		var buttonId = $(this).attr('id');
		$("#categoryDialog").dialog({
			title: "카테고리 관리",
			width: 200,
			height: 120,
			buttons: {
				"확인" : function() {
					
					$("#categoryDialog").dialog("close");
					
					var categoryNameInput = $('#categoryNameInput').val();
					$("#categoryForm")[0].reset();
					$("#categoryForm").attr('action','/category/add.do');
					$('#categoryNameInput').val(categoryNameInput);
					$('#categoryDesc').val(categoryNameInput);
					
					if( buttonId == 'firstCategoryAddButton'){
						
						$('#parentCategoryIdInput').val('0');
						$('#categoryFullNameInput').val(categoryNameInput);
						$("#categoryForm").submit();
						
					}else{
						
						$('#parentCategoryIdInput').val(selectedCategory);
						$('#categoryFullNameInput').val(categoryNameInput);
						if(selectedCategory == ''){
							alert('상위 카테고리를 선택하여 주세요.');
						}else{
							$("#categoryForm").submit();
						}
						
					}
					
				}, "취소": function() {
					$("#categoryDialog").dialog("close");
				}
			}
		});
	});
});
</script>
</head>

<body id="top">
	<!-- 공통 헤더 시작 -->
	<%@ include file="/WEB-INF/head.jsp"%>
	<!-- 공통 헤더 끝 -->

	<!-- 메인 네비게이션 시작  -->
	<%@ include file="/WEB-INF/navigation.jsp"%>
	<!-- 메인 네비게이션 끝  -->

	<div id="content-wrapper">
		<div class="center-wrapper">

			<div class="content" id="content-two-columns">

				<div id="main-wrapper">
					<div id="main">
						<h1>카테고리관리</h1>
						<div style="display: none;" id="categoryDialog">
							<form id="categoryForm" method="post">
								<input type="hidden" 	id="categoryIdInput" 		name="categoryId" />
								<input type="hidden" 	id="parentCategoryIdInput" 	name="parentCategoryId" />
								<input type="hidden" 	id="categoryFullNameInput" 	name="categoryFullName" />
								<input type="hidden" 	id="categoryDescInput" 		name="categoryDesc" />
								<input type="text" 		id="categoryNameInput" 		name="categoryName" value=""/>
							</form>
						</div>
						<div class="content_separator"></div>
						<div class="categoryManagerDiv">
							<div class="categoryWrapper">
								<!-- 카테고리 대분류 -->
								<h3>
									대분류 카테고리
									<button type="button" class="new" id="firstCategoryAddButton">
										<span>신규</span>
									</button>
									<button type="button" class="del_24" id="firstCategoryRemoveButton">
										<span>삭제</span>
									</button>
								</h3>
								<div style="overflow-y: scroll; height: 300px;">
									<table>
										<thead>
											<tr>
												<th>번호</th>
												<th>카테고리명</th>
											</tr>
										</thead>
										<tbody id="firstDeptTableTbody">
											<!-- <tr id="1" class="selected">
												<td>1</td>
												<td>냄비</td>
											</tr>
											<tr id="2" class="on">
												<td>2</td>
												<td>냄비</td>
											</tr>
											<tr id="3">
												<td>3</td>
												<td>냄비</td>
											</tr>
											<tr id="4">
												<td>4</td>
												<td>냄비</td>
											</tr>
											<tr id="5">
												<td>1</td>
												<td>냄비</td>
											</tr>
											<tr id="5">
												<td>5</td>
												<td>냄비</td>
											</tr> -->
											<c:forEach var="firstDeptCategory" varStatus="status" items="${firstDeptCategoryList}">
											<tr id="${firstDeptCategory.categoryId}" 
												onclick="clickMenuMethod(${firstDeptCategory.categoryId},${firstDeptCategory.parentCategoryId})" 
												parentCategoryId="0" clickstatus="0">
												<td>${status.index+1}</td>
												<td>${firstDeptCategory.categoryName}</td>
											</tr>
											</c:forEach>
										</tbody>
									</table>
								</div>
							</div>

							<div class="middleArrowSeperator"></div>

							<div class="categoryWrapper">
								<!-- 카테고리 소분류 -->
								<h3>
									소분류 카테고리
									<button type="button" class="new" id="secondCategoryAddButton">
										<span>신규</span>
									</button>
									<button type="button" class="del_24" id="secondCategoryRemoveButton">
										<span>삭제</span>
									</button>
								</h3>
								<div style="overflow-y: scroll; height: 300px;">
									<table>
										<thead>
											<tr>
												<th>번호</th>
												<th>카테고리명</th>
											</tr>
										</thead>
										<tbody id="secondDeptTableTbody">
											<!-- <tr id="1" class="selected">
												<td>1</td>
												<td>냄비</td>
											</tr>
											<tr id="2" class="on">
												<td>2</td>
												<td>냄비</td>
											</tr>
											<tr id="3">
												<td>3</td>
												<td>냄비</td>
											</tr>
											<tr id="4">
												<td>4</td>
												<td>냄비</td>
											</tr>
											<tr id="5">
												<td>1</td>
												<td>냄비</td>
											</tr>
											<tr id="5">
												<td>5</td>
												<td>냄비</td>
											</tr> -->
											<c:forEach var="secondDeptCategory" varStatus="status" items="${secondDeptCategoryList}">
											<tr id="${secondDeptCategory.categoryId}" 
												onclick="clickMenuMethod(${secondDeptCategory.categoryId},${secondDeptCategory.parentCategoryId})"
												parentCategoryId="${secondDeptCategory.parentCategoryId}" 
												clickstatus="0">
												<td>${status.index+1}</td>
												<td>${secondDeptCategory.categoryName}</td>
											</tr>
											</c:forEach>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div id="sidebar-wrapper">
					<div id="sidebar">

						<!-- 카테고리 box 시작 -->
						<%@ include file="/WEB-INF/category.jsp"%>
						<!-- 카테고리 box 끝 -->

						<div class="box nobborder">

							<div class="box-title">About</div>

							<div class="box-content">
								<p>뭔가 About 설명이 들어가야할 영역</p>
							</div>

						</div>

					</div>
				</div>

				<div class="clearer">&nbsp;</div>

			</div>

		</div>
	</div>

	<!-- bottom 시작 -->
	<%@ include file="/WEB-INF/bottom.jsp"%>
	<!-- bottom 끝 -->

</body>
</html>